<script setup lang="ts">
import MarkdownIt from 'markdown-it';
import markdownItMathjax from 'markdown-it-mathjax3';
import hljs from 'highlight.js';
import 'highlight.js/styles/atom-one-dark.min.css'; // import your preferred style
defineProps<{
  msg: string
  role: string
}>()
const md = new MarkdownIt(
  {
  highlight: function (str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return hljs.highlight(str, { language: lang }).value;
      } catch (__) {}
    }

    return ''; // use external default escaping
  }
});
md.use(markdownItMathjax, {
  tex: {
    inlineMath: [['$', '$'], ['\\(', '\\)']], // 内联数学公式
    displayMath: [['$$', '$$'], ['\\[', '\\]']], // 显示数学公式
    processEscapes: true, // 允许在数学公式中使用反斜杠进行转义
    processEnvironments: true, // 允许使用 LaTeX 环境
  },
});


</script>

<template>
    <div class="container">
      <div class="image-container">
        <img src="@/assets/logo.png" width="50" height="50">
      </div>
      <div class="text-container">
        <p class="speaker">{{ role }}</p>
        <div v-html="md.render(msg)"></div>
      </div>
    </div>
  </template>
  
  <style scoped>
  p{
    font-size: 1rem;
    text-align: left;
  }
  .container {
  display: flex;
  align-items: center;
}

.image-container {
  width: 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: start;
  flex-shrink: 0;
}
.text-container {
  font-size: 1rem; /* Replace with your preferred font size */
  margin-right: 1rem;
}
.text-container .speaker {
  font-weight: bold;
  text-align: left;
  
}
pre.hljs, pre > code.hljs {
  background-color: #f0f0f0; /* Replace with your preferred background color */
}
  </style>